<template>
  <div>

      <el-form  :model="getList"  class="demo-form-inline">

          <el-form-item label="年级" :label-width="formLabelWidth">
              <el-select v-model="getList.ade" placeholder="请选择" clearable @change="grad">
                <el-option
                  v-for="item in grade"
                  :value="item.dictValue" 
                  :key="item.dictValue"             
                  :label="item.dictLabel">
                </el-option>
              </el-select>
          </el-form-item>


          <el-form-item label="学科" :label-width="formLabelWidth">
              <el-select v-model="getList.pointIds" placeholder="请选择" clearable @change="tree">
                <el-option                 
                  v-for="item in findData"
                  :value="item.id" 
                  :key="item.id"             
                  :label="item.subject"
                  >
                </el-option >
              </el-select>              
          </el-form-item>

          <el-form-item label="题干" :label-width="formLabelWidth">
            <el-input v-model="getList.questionText"></el-input>
          </el-form-item>

          <el-form-item label="选项" :label-width="formLabelWidth">

              <span style="margin-left: 55px;">{{ this.A }}</span><el-input v-model="A" style="width: 50px;margin-top: 20px;margin-left: 35px;"></el-input><el-input v-model="getList.optionA" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>             
              <span style="margin-left: 55px;">{{ this.B }}</span><el-input v-model="B" style="width: 50px;margin-top: 20px; margin-left: 35px;"></el-input><el-input v-model="getList.optionB" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
              <span style="margin-left: 55px;">{{ this.C }}</span><el-input v-model="C" style="width: 50px; margin-top: 20px;margin-left: 35px;"></el-input><el-input v-model="getList.optionC" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
              <span style="margin-left: 55px;">{{ this.D }}</span><el-input v-model="D" style="width: 50px;margin-top: 20px; margin-left: 35px;"></el-input><el-input v-model="getList.optionD" style="width: 1000px;margin-left: 20px;"></el-input>  <el-button type="danger" size="small" style="margin-left: 50px;">删除</el-button>
          </el-form-item>

          <el-form-item label="标答" :label-width="formLabelWidth">
            <el-checkbox-group v-model="answer">
              <el-checkbox label="A" ></el-checkbox>
              <el-checkbox label="B" ></el-checkbox>
              <el-checkbox label="C" ></el-checkbox>
              <el-checkbox label="D"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="解析" :label-width="formLabelWidth">
            <el-input v-model="getList.explanation"></el-input>
          </el-form-item>

          <el-form-item label="分数" :label-width="formLabelWidth">
            <el-input-number v-model="getList.score"  :min="1" :max="10" label="描述文字"></el-input-number>
          </el-form-item>

          <el-form-item label="难度" :label-width="formLabelWidth">
              <el-rate v-model="getList.difficultyLevel" style="margin-top: 10px;"></el-rate>
          </el-form-item>

          <el-form-item label="知识点树" :label-width="formLabelWidth">  
            <Treeselect
              v-model="getList.treeIds"   
              :options="treeList"   
              placeholder="请选择"
              noOptionsText="暂无数据"
              noChildrenText="没有子选项" 
              show-count="true"
              :multiple="true"
            />
          </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-left: 130px;">
        <el-button type="primary" size="medium" v-if="this.id==null" @click="add()">提 交</el-button>
        <el-button type="primary" size="medium" v-else @click="upData()">题 交</el-button>

        <el-button  @click="reset()" size="medium">重 置</el-button>

        <el-button  type="success" size="medium">添加选项</el-button>
        <el-button  type="success" @click="getFor()" size="medium">预 览</el-button>
      </div>

      <!-- 预览 -->
      <el-dialog
        :visible.sync="dialogFormVisible"
        width="30%">
      
        <p>{{ this.A }}: &nbsp;&nbsp; {{this.optionA}} &nbsp;&nbsp; {{ this.B }}: &nbsp;&nbsp; {{this.optionB}} &nbsp;&nbsp; {{ this.C }}:&nbsp;&nbsp; {{this.optionC}} {{ this.D }}:&nbsp;&nbsp; {{this.optionD}} </p>
        <span slot="footer" class="dialog-footer">

        </span>
      </el-dialog>

  </div>
</template>

<script>
import axios from 'axios';
import Treeselect from '@riophae/vue-treeselect'  
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
components: {  
  Treeselect  
},
  data(){
      return{
          id:'',
          formLabelWidth: '120px', //新增表单宽度
          dialogFormVisible: false, //新增弹窗
          grade:[],
          findData:[],
          getList:{
             "ade": "",
             "answer": "",
             "creationTime": "",
             "difficultyLevel": 0,
             "discipline": "",
             "explanation": "",
             "id": 0,
             "jonTree": "",
             "knowledgePoint": "",
             "modifyTime": "",
             "optionA": "",
             "optionB": "",
             "optionC": "",
             "optionD": "",
             "point": "",
             "pointIds": "",
             "questionText": "",
             "questions": "",
             "score": 0,
             "strAde": "",
             "strPoint": "",
             "strTree": "",
             "treeIds": [],

          },
          answer:[],
         A:'A',
         B:'B',
         C:'C',
         D:'D',
         optionA:"",
         optionB:"",
         optionC:"",
         optionD:"",
         treeList:[],
         subjectId:'',
         dictLabel:'',

         idd:"",
      }
  },
  created(){
    this.id = sessionStorage.getItem("id")
    console.log(this.id);
      this.searchDict()
      if(this.id){
        this.getBuestions()
        // this.tree()

      }
      // this.Subjec()
  },
  methods:{

    //修改
    upData(){
       this.getList.pointIds = this.idd
       axios.put("/api/buestions/updateBuestions", this.getList).then(res=>{
         this.$message({
             message: res.data.message,
             type: 'success'
           });
       })
       this.$router.push("/online")
     },

    //回显
    getBuestions(){
       axios.get("/api/buestions/findBuestionsById?id="+this.id).then(res=>{
        this.answer = res.data.data.answer.split(",");//将字符转换为数组
         this.getList = res.data.data
         this.getList.ade = res.data.data.strAde
         this.getList.pointIds = res.data.data.strPoint
         this.idd = res.data.data.strId
         this.subjectId = res.data.data.strId
         console.log("subjectId:", this.subjectId);
         this.Tree()
        //  this.Subjec()          
         sessionStorage.removeItem("id")

       })
     },
      //新增
      add(){
          this.getList.questions = 1
          this.getList.answer = this.answer.join(",");//数组转换为字符串
          axios.post("/api/buestions/addBuestions",this.getList).then(res=>{
              this.$message({
                message: res.data.message,
                type: 'success'
              });
          })
          this.$router.push("/online")
      },

      //年级
      searchDict(){
          axios.get("/api/dict/findDictDataByDictTypeIdSysUserSex?dictType=sys_grade_status").then(res=>{
          this.grade =res.data.data
          })
      },
      //判断学科
      grad(val){
          this.subId = val  
          this.Subjec()         

        },
        //学科
        Subjec(){
            axios.get("/api/subject/SubjectList?id="+this.subId).then(res=>{
                this.findData = res.data.data
            })
        },
      //重置
      reset(){
          this.getList={}
      },
      //预览
      getFor(){
          this.dialogFormVisible=true
          this.optionA = this.getList.optionA
          this.optionB = this.getList.optionB
          this.optionC = this.getList.optionC
          this.optionD = this.getList.optionD
      },
    

      //判断树
      tree(val){
        this.subjectId = val
        console.log(val);
        this.Tree()

      },
      //语文树
      Tree(){
          axios.post("/api/pointTree/findPointTreeList?subjectId="+this.subjectId,{}).then(res=>{
              //弹框
              this.treeList = res.data.data
              console.log(this.treeList);
          })
      },


  }
}
</script>

<style scoped>

</style>